<template>
  <div :class="['user-info', backgroundClass]">
    <div class="user-info">
      <!-- 头像部分，点击头像可以选择新的图片 -->
      <div class="avatar-section">
        <el-avatar size="large" :src="user.avatar" />
        <input type="file" @change="handleFileChange" accept="image/*" class="avatar-input" />
        <div class="user-name">{{ user.name }}</div>
      </div>
  
      <!-- 用户详细信息 -->
      <el-card class="user-details">
        <div class="user-info-item">
          <el-icon name="el-icon-user"></el-icon>
          <span class="info-label">用户名:</span>
          <span class="info-value">{{ user.username }}</span>
        </div>
        <div class="user-info-item">
          <el-icon name="el-icon-mail"></el-icon>
          <span class="info-label">电子邮件:</span>
          <span class="info-value">{{ user.email }}</span>
        </div>
        <div class="user-info-item">
          <el-icon name="el-icon-phone"></el-icon>
          <span class="info-label">电话:</span>
          <span class="info-value">{{ user.phone }}</span>
        </div>
        <div class="user-info-item">
          <el-icon name="el-icon-location"></el-icon>
          <span class="info-label">地址:</span>
          <span class="info-value">{{ user.address }}</span>
        </div>
      </el-card>
  
      <!-- 编辑按钮 -->
      <el-button class="animated-btn" type="primary" @click="goToEditPage">编辑信息</el-button>
    </div>
  </div>
</template>
  
<script>
  import { ElAvatar, ElCard, ElIcon, ElButton } from 'element-plus';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router'; 
  import { getUserInfo } from "../../api/user"



  export default {
    data() {
      return {
        backgroundClass: 'bg-image',
      };
    },
    components: {
      ElAvatar,
      ElCard,
      ElIcon,
      ElButton,
    },
    setup() {
      const user = ref({
        avatar: '', // 默认头像
        name: 'zhangsan',
        username: '',
        email: '',
        phone: '',
        address: '',
      });

      const router = useRouter(); 
      
  
      // 处理文件选择
      const handleFileChange = (event) => {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            user.value.avatar = e.target.result; 
          };
          reader.readAsDataURL(file);
        }
      };
  
      // 跳转到编辑页面
      const goToEditPage = () => {
        router.push('/edit' ); 
      };
  
      return {
        user,
        handleFileChange,
        goToEditPage,
      };
    },methods: {
      async fetchActivities() {
        try {
          var userId = localStorage.getItem("userId");
          console.log(userId);
          const response = await getUserInfo(userId);
          this.user.username = response.data.data.username;
          this.user.email = response.data.data.email;
          this.user.phone = response.data.data.phone;
          this.user.address = response.data.data.address;
        } catch (error) {
          console.error('Error fetching activities:', error);
        }
      },
    }, mounted() {
      this.fetchActivities();
    }
  };
</script>
  
<style scoped>
html, body {
  height: 100%;
  margin: 0;
}
.bg-image {
  display: flex;
  background-image: url('/src/assets/bj2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: auto;
  min-height: 100vh;
  width: 100%;
}
.user-info {
  max-width: 1240px;
  height: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); 
  border-radius: 10px; 
  
}

.avatar-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
  
.avatar-section .user-name {
  font-size: 24px;
  margin-left: 10px;
  font-weight: bold;
}
  
.avatar-input {
  display: none; /* 隐藏文件选择按钮 */
}
  
.avatar-section:hover .avatar-input {
  display: block; /* 当鼠标悬停时显示文件选择按钮 */
}
  
.user-details {
  margin-bottom: 20px;
}
.user-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.user-info-item .info-label {
  font-weight: bold;
  margin-right: 8px;
}
.user-info-item .info-value {
  font-size: 16px;
}

.animated-btn {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #409EFF;
  color: white;
  transition: all 0.3s ease;
}
.animated-btn:hover {
  transform: scale(1.1); /* 鼠标悬停时放大 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 增加阴影 */
}
.animated-btn:active {
  transform: scale(0.98); /* 按下时缩小 */
}
</style>